<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
</head>

<body>
	<div id="app"></div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		//定义App父组件 入口组件
		var App = {
			data() {
				return {
					msg: '我是父组件的内容',
					messagec: 'hello C组件'
				}
			},
			methods: {

			},
			template: '<div><p>这是一个父组件</p><A :messagec = "messagec" v-on:getCData="getCData"></A></div>',
			methods: {
				//执行c组件触发的函数
				getCData(val) {
					console.log(val)
				}
			}
		}

		Vue.component('A', {
			data() {
				return {}
			},
			props: ['message'],
			template: '<div><B v-bing="$attrs" v-on="$listeners"></B></div>',
			methods: {}
		})

		Vue.component('B', {
			data() {
				return {

				}
			},
			template: '<div><C :"$attrs" v-on="$listeners"></C></div>',
			methods: {}
		})

		Vue.component('C', {
			data() {
				return {

				}
			},
			template: '<div><div @click="cClickHandler">{{$attrs.messagec}}</div></div>',
			methods: {
				cClickHandler() {
					alert(1)
					this.$emit('getCData', '我是C组件的数据')
				}
			}
		})

		new Vue({
			el: '#app',
			data() {
				return {

				}
			},
			components: {
				// 键值名相同的省略写法
				App
			},
			//挂载App父组件
			template: '<App/>'
		})
	</script>
</body>

</html>